<template>
	<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
		<el-form ref="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()" :label-position="labelPosition" label-width="120px">
			<el-col :span="20">
				<h3>客户资料子模块配置</h3>
				<div class="title_ls"></div>
			</el-col>

			<el-row>
				<el-col :span="20">
					<el-form-item label="子模块名称" label-width='160px' prop="name">
						<el-input v-model="dataForm.name" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="20">
					<el-form-item label="字段名称1" label-width='160px' prop="ext1">
						<el-input v-model="dataForm.ext1" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-col>
				<el-popover placement="top-start" trigger="hover" content="字段名称最少填写一个,最多5个">
					<span class="el-icon-question" slot="reference"></span>
				</el-popover>
			</el-row>
			<el-row>
				<el-col :span="20">
					<el-form-item label="字段名称2" label-width='160px' prop="ext2">
						<el-input v-model="dataForm.ext2" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="20">
					<el-form-item label="字段名称3" label-width='160px' prop="ext3">
						<el-input v-model="dataForm.ext3" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="20">
					<el-form-item label="字段名称4" label-width='160px' prop="ext4">
						<el-input v-model="dataForm.ext4" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="20">
					<el-form-item label="字段名称5" label-width='160px' prop="ext5">
						<el-input v-model="dataForm.ext5" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

		</el-form>
		<span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				labelPosition: "right",
				skillList: [],
				dataForm: {
					name: '',
					ext1: '',
					ext2: '',
					ext3: '',
					ext4: '',
					ext5: '',
				},
				showFlag: 1,
				update: true,
				dataRule: {
					name: [{
						required: true,
						message: '子模块名称不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			init(id) {
				this.showFlag = 1
				this.dataForm.context = ''
				this.dataForm.skillName = ''
				var that = this
				this.dataForm.id = id || '';
				this.visible = true
				that.$nextTick(() => {
					console.log("this.dataForm.id",this.dataForm.id)
					that.$refs['dataForm'].resetFields()
					if(this.dataForm.id) {
						// 修改
						this.$http.post('/cc/customer/sub/config/msg',{
							id:this.dataForm.id
						}).then(resp => {
							console.log("修改子模块回显==>",resp)
							that.dataForm.name = resp.data.name
							that.dataForm.ext1 = resp.data.ext1
							that.dataForm.ext2 = resp.data.ext2
							that.dataForm.ext3 = resp.data.ext3
							that.dataForm.ext4 = resp.data.ext4
							that.dataForm.ext5 = resp.data.ext5
							that.dataForm.ext6 = resp.data.ext6
							that.dataForm.ext7 = resp.data.ext7
							that.dataForm.ext8 = resp.data.ext8
							that.dataForm.ext8 = resp.data.ext9
							that.dataForm.ext10 = resp.data.ext10
						})
					}
				})
			},

			// 表单提交
			dataFormSubmit() {
				var that = this
				that.$refs['dataForm'].validate((valid => {
					if(valid) {
						if(that.dataForm.ext1 == '' && that.dataForm.ext2 == '' && that.dataForm.ext3 == '' && that.dataForm.ext4 == '' && that.dataForm.ext5 == '') {
							this.$message({
								message: '字段名称最少填写一个',
								type: 'warning',
								duration: 1500,
							})
							return false
						}
						console.log("that.dataForm",that.dataForm)
						this.$http.post(`/cc/customer/sub/config/${!this.dataForm.id ? 'save' : 'update'}`, {
							'id': that.dataForm.id || undefined,
							'name': that.dataForm.name,
							'ext1': that.dataForm.ext1,
							'ext2': that.dataForm.ext2,
							'ext3': that.dataForm.ext3,
							'ext4': that.dataForm.ext4,
							'ext5': that.dataForm.ext5,
							'ext6': that.dataForm.ext6,
							'ext7': that.dataForm.ext7,
							'ext8': that.dataForm.ext8,
							'ext9': that.dataForm.ext9,
							'ext10': that.dataForm.ext10,
						}).then(resp => {
							console.log("新增或者修改==>",resp)
							if(resp.data && resp.data.code === '0') {
								that.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										that.visible = false
										that.$emit('refreshDataList')
									}
								})
							} else {
								that.$message.error(resp.data.message)
							}
						})
					}
				}))

			},
		}

	}
</script>
<style lang="scss">
	#el-popover-5179 {
		height: 240px！important;
	}
	
	.el-icon-question {
		font-size: 30px;
		margin-left: 60px;
		color: #409EFF;
	}
	
	.title_ls {
		width: 100%;
		height: 2px;
		border-top: 2px solid #409EFF;
		clear: both;
		margin-bottom: 20px;
	}
</style>